<template>
	<view class="check-stock-detail-list-component">
		<view class="detail-top-view">
			<view class="top-container block-item">
				<view class="top-container-title block-item-title auto-wrap">{{mainObj.planNo}}</view>
				<view class="block-item-container">
					<view class="item-desc">
						<view class="label">时间</view>
						<view class="content auto-wrap">{{mainObj.startPlanTimeFormat}}~{{mainObj.endPlanTimeFormat}}</view>
					</view>
					<view class="item-desc">
						<view class="label">仓库</view>
						<view class="content auto-wrap">{{mainObj.areaName}}</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="list-scroll-view" :scroll-y="true">
			<view class="list-items-around">
				<view class="detail-item block-item" v-for="(item,index) in list" :key="'check-item-'+index" @tap.stop="onActiveItem(item,index)">
					<view class="active-view" v-if="item.actived"></view>
					<view :class="['block-item-title',(!item.expanded?'not-expanded':'')]">
						<view class="title-content">
							<view class="item-desc no-border">
								<view class="label">库位</view>
								<view class="content auto-wrap">{{item.placeCode}}</view>
							</view>
							<view class="item-desc no-border">
								<view class="label">托盘</view>
								<view class="content auto-wrap">{{item.containerCode}}</view>
							</view>
						</view>
						<view class="tag-view">
							<u-tag v-if="item.statusDetailEnum===1" :text="item.statusDetailEnumName" size="mini" bg-color="#808080" color="#ffffff" border-color="#808080" />
							<u-tag v-else-if="item.statusDetailEnum===2" :text="item.statusDetailEnumName" size="mini" bg-color="#FEF3E6" color="#F18201" border-color="#F18201" />
							<u-tag v-else-if="item.statusDetailEnum===3" :text="item.statusDetailEnumName" size="mini" bg-color="#EFFCF2" color="#5CDF7D" border-color="#5CDF7D" />
							<u-tag v-else :text="item.statusDetailEnumName" size="mini" bg-color="#ffc0cb" color="#ff0000" border-color="#ff0000" />
						</view>
						<view class="arrow-view" @tap.stop="onChangeItemExpanded(item,index)">
							<u-icon v-if="!item.expanded" name="arrow-down" color="#909193" :size="24" />
							<u-icon v-else name="arrow-up" color="#909193" :size="24" />
						</view>
					</view>
					<view class="block-item-container" v-if="item.expanded">
						<view class="check-table-header table-row">
							<view class="cell1">序号</view>
							<view class="cell2">物料</view>
							<view class="cell3">库存</view>
							<view class="cell4">实盘</view>
						</view>
						<view class="check-table-body">
							<view class="table-row" v-for="(itemx,indexx) in item.materials" :key="'check-item-material-'+indexx">
								<view class="cell1">{{indexx+1}}</view>
								<view class="cell2 auto-wrap">{{itemx.inventoryMateriaUnique}}</view>
								<view class="cell3">{{itemx.stockNumber}}</view>
								<view class="cell4 large">{{itemx.inventoryNumber}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-more-text-row">没有更多了</view>
		</scroll-view>
		<view class="bottom-btns-row">
			<template v-if="checkType===1">
				<view class="btn-frame"><u-button type="primary" text="出 库" @click="onOutAction"></u-button></view>
				<view class="divider"></view>
			</template>
			<view class="btn-frame"><u-button type="primary" text="盘 点" @click="onGoCheck"></u-button></view>
		</view>
	</view>
</template>

<script>
import { parseDic, $alert, $successInfo } from '@/static/js/utils/index.js'
export default {
	name:'checkStockDetailListComponent',
	emits:['action'],
	props:{
		mainObj: {
		  type: Object,
		  default: function(){
				return {}
			}
		}
	},
	data(){
		return {
			list:[]
		}
	},
	computed:{
		checkType(){
			let res = 2
			if (this.mainObj.inventoryRuled && this.mainObj.inventoryRuled.ruleType===1) {
				res = 1
			}
			return res
		},
	},
	methods:{
		init(){
			this.getList()
		},
		getList(){
			this.$api.get('PageDetail',{id:this.mainObj.id},{block:'checkStock'}).then(d=>{
				this.list = (d || []).map((obj)=>{
					obj.statusDetailEnumName = parseDic(this.$store,'task_status',obj.statusDetailEnum)
					return obj
				});
			}).catch(err=>{
				console.log(err)
			})
		},
		onActiveItem(obj,index) {
			if (this.checkType!==1) return false
			obj.actived = !obj.actived
			this.$set(this.list,index,obj)
		},
		onChangeItemExpanded(obj,index){
			if (obj.expanded) {
				obj.expanded = false
				this.$set(this.list,index,obj)
			} else {
				if (!obj.materials) {
					this.getContainerInfo(obj,index,(f,_arr)=>{
						if (f) {
							obj.expanded = true
							obj.materials = _arr
							this.$set(this.list,index,obj)
						}
					})
				} else {
					obj.expanded = true
					this.$set(this.list,index,obj)
				}
			}
		},
		getContainerInfo(obj,index,callback){
			let params = {
				InventoryPlanId:this.mainObj.id,
				ContainerVsLocation:obj.containerCode
			}
			this.$api.get('ByContainerCodeGetInfo',params,{block:'checkStock'}).then(d=>{
				let _arr = d || []
				callback && callback(true,_arr)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		onGoCheck(){
			this.$emit('action')
		},
		onOutAction(){
			let params = {containerCodes:[]}
			this.list.forEach((eachObj)=>{
				if (eachObj.actived) {
					params.containerCodes.push(eachObj.containerCode)
				}
			})
			if (params.containerCodes.length===0) {
				$alert('请选择出库托盘')
				return false
			}
			this.outAjax(params,(f)=>{
				if (f) {
					$successInfo('出库提交成功')
					this.getList()
				}
			})
		},
		outAjax(params,callback){
			this.$api.post('ByContainerCodeOut',params,{block:'checkStock'}).then(d=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		}
	}
}
</script>

<style scoped lang="scss">
.check-stock-detail-list-component{
	height: 100%;
	display: flex;
	flex-direction: column;
	.detail-top-view,.bottom-btns-row{
		flex-shrink: 0;
	}
	.detail-top-view{
		.top-container{
			.top-container-title{
				display: flex;
				align-items: center;
			}
		}
	}
	.block-item {
		background-color: $uni-bg-color;
		font-size: 38rpx;
		border-width: 2rpx 0;
		border-style: solid;
		border-color: $uni-border-color;
		.block-item-title{
			border-bottom:2rpx solid $uni-border-color;
			font-size: 1.1em;
			padding: 12rpx 16rpx;
		}
		.block-item-container{
			padding: 0 16rpx;
			display: flex;
			flex-wrap: wrap;
		}
	}
	.item-desc{
		flex-shrink: 0;
		width: 100%;
		font-size: .9em;
		display: flex;
		align-items: flex-start;
		padding: 10rpx 0;
		border-bottom: 2rpx dashed $uni-border-color;
		&.no-border{
			border-bottom: 0;
		}
		&>.label {
			font-size: .9em;
			flex-shrink: 0;
			color:#989898;
			width: 80rpx;
		}
		&>.content{
			width: 1px;
			flex-grow: 1;
			line-height: 1.2em;
			padding: 0 4rpx;
		}
		&:last-child {
			border-bottom:0;
		}
	}
	.bottom-btns-row{
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;
		.btn-frame{
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
		.divider{
			width: 20rpx;
			flex-shrink: 0;
		}
	}
	.list-scroll-view{
		flex-grow: 1;
		height: 1px;
		.list-items-around{
			padding-top: 12rpx;
		}
		.detail-item {
			position: relative;
			margin-bottom: 12rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.active-view{
				position: absolute;
				top:0;
				left:0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border:6rpx solid $u-primary;
			}
			.block-item-title{
				font-size: 1em;
				display: flex;
				&.not-expanded{
					border-bottom: 0;
				}
				.tag-view,.arrow-view{
					flex-shrink: 0;
				}
				.title-content{
					width: 1px;
					flex-grow: 1;
				}
				.tag-view,.arrow-view{
					display: flex;
					align-items: center;
				}
				.arrow-view{
					padding-left: 16rpx;
				}
			}
			.block-item-container{
				.check-table-header{
					opacity: .8;
					font-size: .9em;
				}
				.check-table-body{
					width: 100%;
					.table-row:last-child{
						border-bottom: 0;
					}
				}
				.table-row {
					display: flex;
					width: 100%;
					border-bottom: 2rpx dashed $uni-border-color;
					.cell1,.cell2,.cell3,.cell4{
						text-align: center;
						padding: 16rpx 0;
					}
					.cell1,.cell3,.cell4{
						flex-shrink: 0;
					}
					.cell1{
						width: 80rpx;
					}
					.cell3{
						width: 90rpx;
					}
					.cell4{
						width: 90rpx;
						&.large {
							color: #0366AA;
						}
						&.small {
							color: #ff0000;
						}
					}
					.cell2{
						width: 1px;
						flex-grow: 1;
					}
				}
			}
		}
	}
}
</style>